<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>测试案例</title>
    <style type="text/css">
        div {
            display: inline-block;
            width: 100px;
            height: 50px;
            background: lightblue;
        }

        .pip {
            display: block;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin: 4px;

            background-color: #333;
            box-shadow: inset 0 3px #111, inset 0 -3px #555;
        }
    </style>
</head>

<body>
    <div>行内块状元素</div>
    <div>行内块状元素</div>
    <div class="first-face">
        <span class="pip"></span>
    </div>
</body>

</html>